<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-10-30 09:41:51
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-10-31 10:27:33
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-10-30 09:41:51
-->
<template>
  <div class="flex">
    <a-card title="基本用法">
      <a-button type="primary" @click="handleClick">Open Drawer</a-button>
    </a-card>
    <a-card title="打开方向">
      <a-radio-group v-model="position">
        <a-radio value="top">Top</a-radio>
        <a-radio value="right">Right</a-radio>
        <a-radio value="bottom">Bottom</a-radio>
        <a-radio value="left">Left</a-radio>
      </a-radio-group>
      <div :style="{ marginTop: '20px' }">
        <a-button type="primary" @click="handleClicks">Open Drawer</a-button>
      </div>
    </a-card>
  </div>
  <a-popup
    :width="340"
    :visible="visible"
    :header="false"
    placement="center"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> Title </template>
    <div class="boxks">
      You can customize modal body text by the current situation. This modal
      will be closed immediately once you press the OK button.
    </div>
  </a-popup>
  <a-popup
    :width="340"
    :height="340"
    :visible="visibles"
    :placement="position"
    unmount-on-close
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> Title </template>
    <div>
      You can customize modal body text by the current situation. This modal
      will be closed immediately once you press the OK button.
    </div>
  </a-popup>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const visible = ref(false);

    const visibles = ref(false);

    const handleClick = () => {
      visible.value = true;
    };

    const handleClicks = () => {
      visibles.value = true;
    };

    const handleOk = () => {
      visible.value = false;
      visibles.value = false;
    };
    const handleCancel = () => {
      visible.value = false;
      visibles.value = false;
    };

    return {
      visible,
      visibles,
      handleClick,
      handleClicks,
      handleOk,
      handleCancel,
    };
  },
};
</script>

<style lang="scss" scoped>
.flex {
  height: 100vh;
  padding: 200rpx 20rpx;
  //   background: #e5e5e5;
}
:deep(.arco-card) {
  margin-bottom: 30rpx;
}

.boxks {
  width: 200px;
}
</style>
